<template>
  <div class="viewBox">
    <div class="header">
      <div class="left">{{ time }}</div>
      <div class="center">变电站火灾监测</div>
      <div class="right">{{ date }}</div>
    </div>
    <el-row>
      <el-col :span="8"
        ><div class="colTitLeft">温度</div>
        <div class="charta" ref="charta"></div
      ></el-col>
      <el-col :span="8"
        ><div class="colTit colTita">烟幕指数浓度</div>
        <div class="chartb" ref="chartb"></div
      ></el-col>
      <el-col :span="8"
        ><div class="colTitRight">热粒子浓度</div>
        <div class="chartc" ref="chartc"></div
      ></el-col>
      <el-col :span="8"
        ><div class="colTit">湿度</div>
        <div class="chartd" ref="chartd"></div
      ></el-col>
      <el-col :span="8"
        ><div class="colTit">红外测温数据</div>
        <div class="charte" ref="charte"></div
      ></el-col>
      <el-col :span="8"
        ><div class="colTit">CO、NH3浓度</div>
        <div class="chartf" ref="chartf"></div
      ></el-col>
      <el-col :span="16">
        <div class="tablea">
          <!-- <el-table class="custom-table" :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>融合指数对应危险等级 -->
          <div class="sc_header">
            <div class="sc_li">早期辐射值</div>
            <div class="sc_li">多源数据融合指数</div>
            <div class="sc_li">多源数据</div>
            <div class="sc_li">过往数据轮播</div>
            <div class="sc_li">报警信息</div>
            <div class="sc_li">设备日志</div>
          </div>
          <swiper
            direction="vertical"
            :modules="modules"
            :loop="true"
            :slides-per-view="6"
            :space-between="0"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false,
              reverseDirection: false
            }"
            :speed="800"
            class="vertical-swiper"
          >
            <swiper-slide v-for="(item, index) in slides" :key="index">
              <div class="slide-content">
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="tableb">
          <div class="sc_header">
            <div class="sc_li">节点名称</div>
            <div class="sc_li">危险等级</div>
          </div>
          <swiper
            direction="vertical"
            :modules="modules"
            :loop="true"
            :slides-per-view="6"
            :space-between="0"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false,
              reverseDirection: false
            }"
            :speed="800"
            class="vertical-swiper"
          >
            
            <swiper-slide v-for="(item, index) in slides" :key="index">
              <div class="slide-content">
                <div class="sc_li">达瓦</div>
                <div class="sc_li">达瓦</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getDeviceDataListLatest } from '@/api/device/deviceData'

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/autoplay'

const modules = [Autoplay]

// 6个纵向轮播项数据
const slides = ref([
  { text: 'Slide Content 1' },
  { text: 'Slide Content 2' },
  { text: 'Slide Content 3' },
  { text: 'Slide Content 4' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 5' },
  { text: 'Slide Content 6' }
])

// 各类数组
let timeArr = [] //温度
let temperatureArr = [] //温度
let smokeArr = [] //烟幕指数
let smokeArrsd = [] //烟幕指数
let smokeTImeArr = [] //烟幕指数
let humidityNameArr = [] //湿度
let humidityArr = [] //湿度
let infraredArr = [] //红外测温
let nhArr = [] //氨气浓度
let sonytemArr = [] //摄像头捕捉最高温
let coArr = [] //co浓度

const charta = ref()
const chartb = ref()
const chartc = ref()
const chartd = ref()
const charte = ref()
const chartf = ref()
const chartg = ref()

// 查询
const getDeviceDataData = async () => {
  const res = await getDeviceDataListLatest({
    dataCount: 8
  })
  console.log('res', res)
  if (res.code === 0) {
    res.data.list.map((item) => {
      timeArr.push(item.CreatedAt.slice(0, 9))
      temperatureArr.push(item.temperature)
      smokeArr.push(item.smokeIndex)
      smokeArrsd.push([item.smokeIndex, item.smokeIndex]) //烟幕散点
      console.log('------smokeArrsd', smokeArrsd)
      smokeTImeArr.push({ name: item.CreatedAt.slice(0, 9), max: 30 })
      humidityNameArr.push(item.companyName)
      humidityArr.push(item.humidity)
      infraredArr.push(item.infraredTemperature)
      nhArr.push(item.NH3)
      sonytemArr.push(item.sonytem)
      coArr.push(item.coConcentration)
    })
    console.log('-----temperatureArr', temperatureArr)

    const initChart = (refName, option) => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(refName)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    console.log('==a==a=', charta)

    initChart(charta.value, optiona)
    initChart(chartb.value, optionb)
    initChart(chartc.value, optionc)
    initChart(chartd.value, optiond)
    initChart(charte.value, optione)
    initChart(chartf.value, optionf)
  }
}

onMounted(() => {
  getDeviceDataData()
})

// 图1
// const charta = ref()
// onMounted(() => {
//   initChart(charta.value, optiona)
// })
const optiona = {
  xAxis: {
    type: 'category',
    data: timeArr, // 组别名称
    // 轴线样式（横线）
    axisLine: {
      show: true, // 显示Y轴线
      lineStyle: {
        color: '#1D2D6A' // x轴主轴线颜色
      }
    },
    axisLabel: {
      rotate: 45, // 设置文字旋转角度，正值表示顺时针旋转
      color: '#77B2D4' // Y轴主轴线颜色
    }
  },
  yAxis: {
    type: 'value',
    // 轴线样式（横线）
    axisLine: {
      show: true, // 显示Y轴线
      lineStyle: {
        color: '#1D2D6A' // Y轴主轴线颜色
      }
    },
    axisLabel: {
      color: '#77B2D4' // Y轴主轴线颜色
    },
    // X轴分割线（竖线）
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(200,200,200,0.3)', // 竖线颜色
        type: 'dashed' // 可选虚线
      }
    }
  },
  series: [
    // 第一个柱状图
    {
      type: 'bar',
      // name: 'Series A',
      data: temperatureArr,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 顶部圆角
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#0CB569' },
          { offset: 0.5, color: '#17C1A9' },
          { offset: 1, color: '#20CDDE' }
        ])
      },
      barWidth: '30%' // 控制柱子宽度
    },
    // 第二个柱状图
    {
      type: 'bar',
      // name: 'Series B',
      data: sonytemArr,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 顶部圆角
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#F8BD5B' },
          { offset: 0.5, color: '#FEA553' },
          { offset: 1, color: '#FC8C4D' }
        ]) // 颜色2
      },
      barWidth: '30%'
    }
  ],
  // 调整双柱间距
  grid: { right: '10%' },
  // 双柱并排显示配置
  legend: { show: true },
  tooltip: { trigger: 'axis' }
}

// 图2
// const chartb = ref()
// onMounted(() => {
//   initChart(chartb.value, optionb)
// })
const optionb = {
  // 标题样式
  // title: {
  //   text: '技能评估雷达图',
  //   left: 'center'
  // },

  // 圆形雷达坐标系配置
  radar: {
    // 关键配置：分割线样式
    splitLine: {
      lineStyle: {
        // 数组顺序：从内到外各圈样式
        type: ['dashed', 'dashed', 'dashed', 'dashed', 'dashed'], // 前三个内圈虚线，最外圈实线
        color: ['#eee', '#8088AB', '#8088AB', '#8088AB', '#8088AB'], // 颜色渐变
        width: 1
      }
    },
    // 控制同心圆数量（需与 lineStyle.type 数组长度匹配）
    splitNumber: 4, // 生成4个同心圆（含最外圈）

    shape: 'circle', // 核心配置：设为圆形
    center: ['50%', '52%'], // 圆心位置
    radius: '65%', // 半径大小

    // 坐标轴样式
    axisLine: {
      lineStyle: {
        color: 'rgba(100, 100, 100, 0.1)', // 网格线颜色
        type: 'dashed'
      }
    },

    // 刻度标签
    axisLabel: {
      color: '#666'
    },

    // 分割区域样式
    splitArea: {
      areaStyle: {
        color: ['rgba(200,200,200,0)', 'rgba(200,200,200,0)'] // 交替颜色
      }
    },

    // 指示器配置（维度标签）
    indicator: smokeTImeArr,
    name: {
      textStyle: {
        color: '#FFF',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  },

  // 数据系列
  series: [
    {
      type: 'radar',
      // 关键配置：隐藏数据点和连接线
      symbol: 'none', // 隐藏数据点
      lineStyle: {
        width: 0 // 隐藏连接线
      },
      // 保留区域填充色（可选）
      areaStyle: {
        color: '#00FF4C' // 带透明度的颜色
      },
      data: [
        {
          value: smokeArr,
          name: '个人能力',

          // 线条样式
          lineStyle: {
            color: '#409EFF',
            width: 1,
            type: 'dashed'
          }
        }
      ]
    }
  ]
}

// 图3
// const chartc = ref()
// onMounted(() => {
//   initChart(chartc.value, optionc)
// })
// 生成模拟数据 [x轴值, y轴值, 点大小值]

const optionc = {
  xAxis: {
    type: 'value',
    // 修改横线颜色（轴线）
    axisLine: {
      lineStyle: {
        color: '#465286', // 红色轴线
        type: 'dashed'
      }
    },
    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  yAxis: {
    type: 'value',
    // 修改横线颜色（轴线）
    axisLine: {
      lineStyle: {
        color: '#465286', // 红色轴线
        type: 'dashed'
      }
    },
    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  series: [
    {
      symbolSize: 10,
      data: smokeArrsd,
      type: 'scatter',
      itemStyle: {
        color: '#1B7EF2' // 所有散点设为红色
      }
    }
  ]
}
// 图4
// const chartd = ref()
// onMounted(() => {
//   initChart(chartd.value, optiond)
// })

const optiond = {
  // title: {
  //   text: '湿度',
  //   left: 'center'
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  // legend: {
  //   data: ['湿度值', '趋势线']
  // },
  xAxis: {
    type: 'category',
    data: timeArr,
    // 轴线样式（横线）
    axisLine: {
      show: true, // 显示Y轴线
      lineStyle: {
        color: '#1D2D6A' // x轴主轴线颜色
      }
    },
    axisLabel: {
      rotate: 45, // 设置文字旋转角度，正值表示顺时针旋转
      color: '#77B2D4', // Y轴主轴线颜色
      lineStyle: {
        color: '#465286', // 红色轴线
        type: 'dashed'
      }
    },

    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  yAxis: {
    type: 'value',
    // 修改横线颜色（轴线）
    axisLine: {
      lineStyle: {
        color: '#77B2D4', // 红色轴线
        type: 'dashed'
      }
    },
    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  series: [
    {
      name: '湿度值',
      type: 'bar',
      data: humidityNameArr,
      itemStyle: {
        color: function (params) {
          // 根据索引设置颜色
          var colorList = [
            '#00199E',
            '#5ECBFF',
            '#00199E',
            '#5ECBFF',
            '#00199E'
          ]
          return colorList[params.dataIndex]
        }
      },
      barWidth: '30%'
    },
    {
      name: '趋势线',
      type: 'line',
      data: humidityNameArr,
      itemStyle: {
        color: '#ffc107'
      }
    }
  ]
}
//图5

// const charte = ref()
// onMounted(() => {
//   initChart(charte.value, optione)
// })
const optione = {
  // title: {
  //   text: '红外测温数据',
  //   left: 'center'
  // },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeArr,
    // 修改横线颜色（轴线）
    // 轴线样式（横线）
    axisLine: {
      show: true, // 显示Y轴线
      lineStyle: {
        color: '#1D2D6A' // x轴主轴线颜色
      }
    },
    axisLabel: {
      rotate: 45, // 设置文字旋转角度，正值表示顺时针旋转
      color: '#77B2D4', // Y轴主轴线颜色
      lineStyle: {
        color: '#465286', // 红色轴线
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'value',
    // 修改横线颜色（轴线）
    axisLine: {
      lineStyle: {
        color: '#77B2D4', // 红色轴线
        type: 'dashed'
      }
    },
    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  series: [
    {
      name: '温度',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255, 70, 131, 0.8)' },
          { offset: 1, color: 'rgba(255, 158, 68, 0.1)' }
        ])
      },
      data: infraredArr,
      lineStyle: {
        color: '#ff6b6b', // 直接指定颜色
        width: 3
      }
    }
  ]
}

// 图6
// const chartf = ref()
// onMounted(() => {
//   initChart(chartf.value, optionf)
// })
const optionf = {
  xAxis: {
    type: 'category',
    data: timeArr, // 组别名称
    // 轴线样式（横线）
    axisLine: {
      show: true, // 显示Y轴线
      lineStyle: {
        color: '#1D2D6A' // x轴主轴线颜色
      }
    },
    axisLabel: {
      rotate: 45, // 设置文字旋转角度，正值表示顺时针旋转
      color: '#77B2D4', // Y轴主轴线颜色
      lineStyle: {
        color: '#465286', // 红色轴线
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'value',
    // 修改横线颜色（轴线）
    axisLine: {
      lineStyle: {
        color: '#77B2D4', // 红色轴线
        type: 'dashed'
      }
    },
    // 修改网格线颜色（横线）
    splitLine: {
      lineStyle: {
        color: '#465286'
      }
    }
  },
  series: [
    // 第一个柱状图
    {
      type: 'bar',
      name: 'CO1',
      data: coArr,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 顶部圆角
        color: '#09B66D'
      },
      barWidth: '30%' // 控制柱子宽度
    },
    // 第二个柱状图
    {
      type: 'bar',
      name: 'NH3',
      data: nhArr,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 顶部圆角
        color: '#246CFC'
      },
      barWidth: '30%'
    }
    // // 第三个柱状图
    // {
    //   type: 'bar',
    //   // name: 'Series B',
    //   data: [80, 150, 200, 80, 150, 200],
    //   itemStyle: {
    //     borderRadius: [10, 10, 0, 0], // 顶部圆角
    //     color: '#FF8A48' // 颜色2
    //   },
    //   barWidth: '15%'
    // }
  ],

  // 调整双柱间距
  grid: { right: '10%' },
  // 双柱并排显示配置
  legend: {
    show: true,
    orient: 'horizontal', // 图例列表的布局朝向，默认为'horizontal'
    icon: 'circle',
    right: '3%',
    top: '3%',
    textStyle: {
      color: '#71A2C9' // 图例文字的颜色
    },
    symbol: 'roundRect'
  },
  tooltip: { trigger: 'axis' }
}

// 表格7
const tableData = reactive([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }
])

var date = ref()
var time = ref()

onMounted(() => {
  // 时间
  setInterval(() => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始计数
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    date.value = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
    const dayOfWeek = now.getDay()
    const days = [
      '星期日',
      '星期一',
      '星期二',
      '星期三',
      '星期四',
      '星期五',
      '星期六'
    ]
    time.value = days[dayOfWeek] + '  ' + `${hours}:${minutes}`
  }, 1000)
})
</script>
<style lang="scss" scoped>
.sc_header {
  width: 100%;
  height: 30px;
  display: flex;
  display: flex;
  color: white;
  border: 1px solid #0e9cff;
  border-bottom: none;
  .sc_li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #0e9cff;
  }
  .sc_li:last-of-type {
    border: none;
  }
}
.vertical-swiper {
  width: 100%;
  height: calc(100% - 30px);
}

.slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  color: white;
  border: 1px solid #0e9cff;
  border-bottom: none;
  .sc_li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #0e9cff;
  }
  .sc_li:last-of-type {
    border: none;
  }
}

.el-col {
  display: flex;
  justify-content: center;
  position: relative;
  .colTitLeft {
    font-size: 12px;
    color: #a7d5ff;
    position: absolute;
    left: 10%;
    top: 3%;
    z-index: 999999;
  }
  .colTit {
    font-size: 12px;
    color: #a7d5ff;
    position: absolute;
    left: 6%;
    top: 6%;
    z-index: 999999;
  }
  .colTita {
    font-size: 12px;
    color: #a7d5ff;
    position: absolute;
    left: 6%;
    top: 12%;
    z-index: 999999;
  }
  .colTitRight {
    font-size: 12px;
    color: #a7d5ff;
    position: absolute;
    right: 6%;
    top: 3%;
    z-index: 999999;
  }
}
.header {
  width: 100%;
  height: 6vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: url('@/assets/header.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .left {
    flex: 1;
    text-align: center;
    margin-bottom: 2vh;
  }
  .center {
    width: 50%;
    font-size: 22px;
    font-weight: blod;
    text-align: center;
  }
  .right {
    flex: 1;
    text-align: center;
    margin-bottom: 2vh;
  }
}
.viewBox {
  width: 100%;
  height: 85vh;
  // background: url('@/assets/bg-tongyi.png') center center;
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  padding: 0px 30px 30px 30px;
  box-sizing: border-box;
  background-color: #020f58;
}
.viewBox .el-col {
  margin-bottom: 20px;
}
.charta {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgLeft.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 3%;
}
.chartb {
  width: 95%;
  height: 22vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 20px;
}
.chartc {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgRight.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.chartd {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.charte {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.chartf {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tablea {
  width: 97.5%;
  height: 24vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tableb {
  width: 95%;
  height: 24vh;
  background: url('@/assets/bgCenter.png') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<style>
.custom-table,
.custom-table tr,
.custom-table th.el-table__cell {
  background-color: transparent !important;
  border: 1px solid #0e9cff !important;
  color: #fff !important;
}
.custom-table tr:hover {
  background-color: transparent !important;
  border: 1px solid #0e9cff !important;
  color: #fff !important;
}
.custom-table .el-table__row td:hover {
  background-color: transparent !important;
  color: #fff !important;
}
.custom-table .el-table__row tr:hover {
  background-color: transparent !important;
  color: #fff !important;
}
.custom-table .el-table__row td:hover div {
  background-color: transparent !important;
  color: #fff !important;
}
.custom-table .el-table__row:hover td {
  background-color: transparent !important;
  color: #fff !important;
}
.custom-table,
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: 1px solid #0e9cff;
}
.custom-table div {
  color: #fff !important;
}
.el-table__inner-wrapper {
  border: 1px solid #0e9cff !important;
}
</style>
